import { getHomejobdetailId } from "@/apis/endpoint/home";
import { HomeJobDetailResult } from "@/apis/endpoint/model";
import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import { pageMapper } from "@/constants/pageMap";
import { getSalaryText } from "@/utils/app";
import { bd09togcj02 } from "@/utils/coor-transform";
import { noop } from "@/utils/helper";
import { Image, Map, type MapProps, Navigator, Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { useImmer } from "use-immer";

interface RouteParams {
  id: string
  [key: string]: string
}
export default function Index() {
  const params = useRouter<RouteParams>().params
  const [jobDetail, setJobDetail] = useState<INullable<HomeJobDetailResult>>(null)
  const [location, setLocation] = useImmer<{markers: MapProps.marker[]; at: {longitude: number; latitude: number;}}>({
    markers: [
      {
        id: 1,
        longitude: 113.324520,
        latitude: 23.099994,
        iconPath: "/static/icons/common/map-marker.png",
        width: 24,
        height: 24
      }
    ],
    at: {
      longitude: 113.324520,
      latitude: 23.099994,
    }
  })
  useEffect(() => {
    getHomejobdetailId(Number(params.id)).send()
    .then(detail => {
      setJobDetail(detail)
      if (detail.jobAddress && detail.jobAddress.lat && detail.jobAddress.lng) {
        const [longitude, latitude] = bd09togcj02(detail.jobAddress.lng!, detail.jobAddress.lat!)
        setLocation(draft => {
          draft.at.longitude = longitude
          draft.at.latitude = latitude
          draft.markers[0].longitude = longitude
          draft.markers[0].latitude = latitude
          draft.markers[0].callout = {
            content: detail.jobAddress.address!,
            bgColor: "#ffffff",
            borderRadius: 8,
            color: "#313337",
            display: "ALWAYS",
            fontSize: 14,
            padding: 12,
            anchorX: 0,
            anchorY: 0,
            borderColor: "#ffffff",
            borderWidth: 0,
            textAlign: "center"
          }
        })
      }
    })
  }, [])
  return (
    <GpContainer className="bg-[#F4F6FC]">
      <View className="bg-white pt-[40px] px-[40px] pb-[22px] box-border">
        <View className="flex flex-row justify-between gap-[12px]">
          <Text className="text-primary text-[48px] leading-[56px] font-bold truncate flex-1 w-0">
            {jobDetail?.name}
          </Text>
          <Text className="text-[36px] leading-[36px] font-bold text-theme flex-none">
            {getSalaryText({salaryMin: jobDetail?.salaryMin, salaryMax: jobDetail?.salaryMax})}{jobDetail?.salaryCount ? `·${jobDetail.salaryCount}薪` : null}
          </Text>
        </View>
        <View className="flex flex-row flex-nowrap items-center gap-[50px] mt-[40px]">
          <View className="flex flex-row items-center gap-[12px]">
            <GpFontIcon name="icon-dizhi" size={28} color="#ACAEB2" />
            <Text className="text-[28px] leading-[28px] font-normal text-primary">{jobDetail?.jobAddress?.regionName}</Text>
          </View>
          <View className="flex flex-row items-center gap-[12px]">
            <GpFontIcon name="icon-gongzuojingyan" size={28} color="#ACAEB2" />
            <Text className="text-[28px] leading-[28px] font-normal text-primary">{jobDetail?.experienceDisplay}</Text>
          </View>
          <View className="flex flex-row items-center gap-[12px]">
            <GpFontIcon name="icon-xueli" size={28} color="#ACAEB2" />
            <Text className="text-[28px] leading-[28px] font-normal text-primary">{jobDetail?.educationDisplay}</Text>
          </View>
        </View>
        <Navigator url={`/${pageMapper.position.hr}?id=${jobDetail?.publishUserId}`} className="mt-[32px] px-[24px] flex flex-row items-center gap-[24px] h-[128px] rounded-[24px] bg-linear-90 from-0% from-[#F4F6FC] to-100% to-[#F4F6FC]/0">
          <Image src={jobDetail?.publishUserAvatar ?? __DEF_AVATAR__} className="size-[80px] rounded-[50%] object-cover" />
          <View className="flex flex-col gap-[16px]">
            <Text className="text-primary text-[28px] leading-[28px] font-medium">
              {jobDetail?.publishUserName ?? '--'}
            </Text>
            <Text className="text-third text-[24px] leading-[24px]">
              {jobDetail?.companyName} · 招聘主管
            </Text>
          </View>
          <GpFontIcon name="icon-a-jiantou_youda" size={40} color="#ACAEB2" className="ml-auto" />
        </Navigator>
      </View>
      <View className="py-[28px] flex flex-col gap-[16px] px-[16px]">
        <View className="pt-[48px] px-[24px] pb-[64px] bg-white rounded-[24px]">
          <Text className="text-primary text-[32px] leading-[32px] font-bold bg-linear-90 from-0% from-theme/30 to-100% to-theme/0 bg-no-repeat bg-left-bottom bg-size-[auto_8px]">
            职位描述
          </Text>
          <View className="flex flex-col gap-[32px] mt-[32px]">
            {
              jobDetail?.responsibility?.split(/\r?\n+/)?.map((text, index) => (
                <Text key={index} className="text-third text-[28px] leading-[40px] text-justify break-words break-all">
                  {text}
                </Text>
              ))
            }
          </View>
        </View>
        <View className="pt-[48px] px-[24px] pb-[64px] bg-white rounded-[24px]">
          <Text className="text-primary text-[32px] leading-[32px] font-bold bg-linear-90 from-0% from-theme/30 to-100% to-theme/0 bg-no-repeat bg-left-bottom bg-size-[auto_8px]">
            岗位福利
          </Text>
          <View className="flex flex-row flex-wrap gap-[12px] mt-[32px]">
            {
              jobDetail?.companyBenefits?.map(item => (
                <View key={item} className="h-[60px] leading-[60px] px-[20px] bg-[#F4F6FC] rounded-[8px] text-third text-[28px]">
                  {item}
                </View>
              ))
            }
          </View>
        </View>
        <View className="pt-[48px] px-[24px] pb-[28px] bg-white rounded-[24px]">
          <Text className="text-primary text-[32px] leading-[32px] font-bold bg-linear-90 from-0% from-theme/30 to-100% to-theme/0 bg-no-repeat bg-left-bottom bg-size-[auto_8px]">
            公司信息
          </Text>
          <Navigator url={`/${pageMapper.position.company}?id=${jobDetail?.companyId}`} className="flex flex-row items-center gap-[24px] mt-[32px]">
            <Image src={__DEF_AVATAR__} className="size-[112px] flex-none object-cover" />
            <View className="flex flex-col justify-center flex-1 w-0">
              <View className="text-primary text-[32px] font-medium leading-[28px] truncate">
                {jobDetail?.companyName}
              </View>
              <View className="text-third text-[28px] leading-[28px] mt-[16px]">
                {jobDetail?.companyIndustryName} · A轮 · {jobDetail?.companyScale}
              </View>
              <View className="text-[#496EA9] text-[28px] leading-[28px] mt-[12px]">
                在招<Text className="text-theme px-[4px]">{jobDetail?.openJobCount}</Text>个职位
              </View>
            </View>
            <GpFontIcon name="icon-a-jiantou_youda" size={40} color="#ACAEB2" className="flex-none" />
          </Navigator>
          <View className="mt-[28px] h-[320px] box-border rounded-[16px] border-[2px] border-solid border-[#EEEEEE]">
            <Map
              id="job-map"
              style="width: 100%; height: 100%;"
              longitude={location.at.longitude}
              latitude={location.at.latitude}
              scale={14}
              markers={location.markers}
              onError={noop}
            />
          </View>
        </View>
      </View>
    </GpContainer>
  )
}
